<template>
  <view class="meta">
    <Interval
      title="年龄范围"
      :pickerValues="MateList.age_range"
      :flag="ageFlag"
      :pickerRanges="agePickerRanges"
      types="ages"
      :bindPickerChange="ageBindPickerChange"
      :changeFlag="changeAgeFlag"
    >
    </Interval>
    <view class="hrs"></view>
    <Interval
      title="身高范围"
      :pickerValues="MateList.height_range"
      :flag="heightFlag"
      :pickerRanges="heightPickerRanges"
      types="hights"
      :bindPickerChange="heightBindPickerChange"
      :changeFlag="changeHeightFlag"
    ></Interval>
    <view class="hrs"></view>

    <Checkbox
      :items="desired_marital_status"
      :value="MateList.desired_marital_status"
      @changeCheckbox="changeMarriages"
      :checked="checked"
      title="婚况"
      :save="save"
    ></Checkbox>
    <view class="hrs"></view>

    <Parents
      :workArea="education"
      :value="MateList.minimum_education"
      :changePicker="changePickerEducation"
      title="最低学历"
    >
    </Parents>
    <view class="hrs"></view>

    <Parents
      :workArea="money"
      :value="MateList.minimum_income"
      :changePicker="changePickerMoney"
      title="最低收入"
    >
    </Parents>
    <view class="hrs"></view>

    <Parents
      :workArea="marry"
      :value="MateList.marriage_timing"
      :changePicker="changePickerMarry"
      title="结婚时间"
    >
    </Parents>
    <view class="hrs"></view>

    <WorkAreaPicker
      title="工作地区"
      :workArea="[MateList.province, MateList.city, MateList.district]"
      @update:workArea="handleWorkAreaChange"
    >
    </WorkAreaPicker>
    <view class="hrs"></view>

    <Checkbox
      :items="house"
      :value="MateList.house"
      @changeCheckbox="changeHouse"
      :checked="checked"
      title="房子"
      :save="save"
    ></Checkbox>
    <view class="hrs"></view>

    <view class="footer-qita">
      <uni-section>
        <view class="example">
          <uni-forms
            ref="baseForm"
            :modelValue="baseFormData"
            :label-width="90"
            class="custom-forms"
          >
            <uni-forms-item class="other" label="其他要求">
              <uni-easyinput
                class="easyinput"
                :inputBorder="false"
                v-model="MateList.other_requirements"
                placeholder="请输入其他要求"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script setup lang="ts">
import Parents from '../components/Profile/Parents.vue'
import Checkbox from '../components/Profile/Checkbox.vue'
import Interval from '../components/Profile/Interval.vue'
import WorkAreaPicker from '../components/Profile/WorkAreaPicker.vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import { ref, reactive, watch, onMounted, onBeforeUnmount, toRef, toRefs, computed } from 'vue'

import { getUserAPI } from '@/services/my'

const education = ref<string[]>(['初中', '高中', '大专', '本科', '硕士', '博士'])
const money = ref<string[]>(['2~3千', '3~5千', '5~8千', '8千~1万', '1~2万', '2~5万', '5万以上'])
const marry = ref<string[]>(['随时', '半年内', '一年内', '两年内', '三年内'])
const ids = ref<string>('')

//多选框
const desired_marital_status = ref<string[]>(['未婚', '离异', '丧偶'])
const house = ref<string[]>([
  '已购房(有贷款)',
  '已购房(无贷款)',
  '有能力购房',
  '无房',
  '无房希望双方解决',
  '与父母同住',
  '独自租房',
  '与人合租',
  '住亲朋家',
  '住单位房',
])

interface baseFormDataFace {
  other_requirements: string
}

// 基础表单数据
const baseFormData = reactive<baseFormDataFace>({
  other_requirements: '',
})

const checked = ref<boolean>(false)
const MateList = reactive({
  age_range: [], // 年龄范围
  height_range: [], // 身高范围
  desired_marital_status: [], // 婚况
  minimum_education: '', // 最低学历
  minimum_income: '', // 最低收入
  marriage_timing: '', // 结婚时间
  province: '', // 省
  city: '', // 市
  district: '', // 区
  house: [], // 房子
  other_requirements: '', // 其他要求
})

// 响应式变量
const ageFlag = ref<boolean>(false)
const agePickerRanges = ref<number[][]>([
  // Array(61)
  //   .fill(0)
  //   .map((_, index) => index + 20), // 生成20到80之间的值
  // Array(61)
  //   .fill(0)
  //   .map((_, index) => index + 20), // 同样生成20到80之间的值

  Array.from({ length: 61 }, (_, index) => index + 20), // 生成20到80之间的值
  Array.from({ length: 61 }, (_, index) => index + 20), // 同样生成20到80之间的值
])

const ageBindPickerChange = (e: any) => {
  console.log(e, 'hfugeifugeifggu')

  // // 获取用户选择的两个索引值
  // const selectedStartAgeIndex = e.detail.value[0];
  // const selectedEndAgeIndex = e.detail.value[1];
  // 根据索引从 agePickerRanges 中获取实际的年龄值
  const selectedStartAge = agePickerRanges.value[0][e.detail.value[0]]
  const selectedEndAge = agePickerRanges.value[1][e.detail.value[1]]

  // 将获取到的年龄值直接赋值给 MateList.age_range
  MateList.age_range = [selectedStartAge, selectedEndAge]
  console.log(MateList, 'eeee')
}
const changeAgeFlag = () => {
  ageFlag.value = true
}
// 响应式变量
const heightFlag = ref<boolean>(false)
const heightPickerRanges = ref<any[][]>([
  Array(71)
    .fill(0)
    .map((item, index) => item + index + 140 + 'cm'),
  Array(71)
    .fill(0)
    .map((item, index) => item + index + 140 + 'cm'),
])

const heightBindPickerChange = (e: any) => {
  MateList.height_range = e.detail.value
}
const changeHeightFlag = () => {
  heightFlag.value = true
}
const changePickerEducation = (e: Event): void => {
  MateList.minimum_education = education.value[e.detail.value]
}

const changePickerMoney = (e: Event): void => {
  MateList.minimum_income = money.value[e.detail.value]
}
const changePickerMarry = (e: Event): void => {
  MateList.marriage_timing = marry.value[e.detail.value]
}

const handleWorkAreaChange = (newWorkArea: string[]) => {
  MateList.province = newWorkArea[0] || ''
  MateList.city = newWorkArea[1] || ''
  MateList.district = newWorkArea[2] || ''
}

const changeMarriages = (e: Event): void => {
  MateList.desired_marital_status = e
}
const changeHouse = (e: Event): void => {
  MateList.house = e
}
const save = (value: string[]) => {
  MateList.desired_marital_status = value
}

// 页面卸载时保存数据到本地存储
onBeforeUnmount(() => {
  uni.setStorageSync('formData', MateList)
})

const getUserList = async () => {
  try {
    let DataList = await getUserAPI(ids.value)

    // 确保数据结构与 MateList 匹配
    MateList.age_range = DataList.my_list.age_range || [20, 30]
    MateList.height_range = DataList.my_list.height_range || [150, 180]
    MateList.desired_marital_status = DataList.my_list.desired_marital_status || []
    MateList.minimum_education = DataList.my_list.minimum_education || ''
    MateList.minimum_income = DataList.my_list.minimum_income || ''
    MateList.marriage_timing = DataList.my_list.marriage_timing || ''
    MateList.province = DataList.my_list.province || ''
    MateList.city = DataList.my_list.city || ''
    MateList.district = DataList.my_list.district || ''
    MateList.house = DataList.my_list.house || []
    MateList.other_requirements = DataList.my_list.other_requirements || ''
  } catch (error) {
    console.error('Failed to load user data:', error)
  }
}

onReady(() => {
  const storedData = uni.getStorageSync('formData')
  if (storedData) {
    Object.assign(MateList, storedData)
  }
})

onShow(() => {
  console.log(MateList, 'MateList')
})
</script>

<style scoped lang="scss">
.hrs {
  height: 1px; /* 对于水平线 */
  transform: scaleY(0.5);
  background-color: #ef8da9;
  width: calc(100% + 40rpx);
  margin-left: -20rpx;
  margin-bottom: 20rpx;
  margin-top: -20rpx;
}
.meta {
  border: 1px solid #f3b0c3;
  width: 90vw;
  border-radius: 40rpx;
  margin: auto;
  box-sizing: border-box;
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  background-color: #fbfbfb;

  .footer-qita {
    width: 100%;
    margin-top: 1%;
  }
}
</style>
